<template>
  <div class="search-container">
    <!-- 背景图 -->
    <img src="@/assets/images/星空背景01.png" class="search-background">
    <!-- 搜索页面顶部盒子 -->
    <div class="search-top">
      <h2>搜索 {{ keyword }}</h2>
      <div class="fun">
        <h6>你可能感兴趣</h6>
        <div class="fun-list">

          <div class="fun-item" v-if="artists.length > 0" @click="$router.push(`/artists/${hotArtist.id}`)">
            <img style="border-radius:50%" :src="hotArtist.picUrl">
            <p>
              <span>歌手：<span v-html="hotArtist.name"></span><span v-if="hotArtist.alias[0]">({{ hotArtist.alias[0]
              }})</span></span>
              <span class="number">专辑：{{ hotArtist.albumSize }}，Mv：{{ hotArtist.mvSize }}</span>
            </p>
          </div>

          <div class="fun-item" v-if="playlists.length > 0" @click="$router.push(`/playlists/${playlists[0].id}`)">
            <img :src="playlists[0].coverImgUrl">
            <p>
              <span>歌单：<span v-html="playlists[0].name"></span></span>
              <span class="number">歌曲：{{ playlists[0].trackCount }}，播放{{ playlists[0].playCount > 1000 ?
              (playlists[0].playCount / 10000).toFixed(0) : playlists[0].playCount
              }}万</span>
            </p>
          </div>
          <div class="fun-item" v-if="albums.length > 0" @click="$router.push(`/albums/${albums[0].id}`)">
            <img :src="albums[0].picUrl">
            <p>
              <span>专辑：<span v-html="albums[0].name"></span><span v-if="albums[0].alias[0]"
                  v-html="albums[0].alias[0]"></span></span>
              <span class="number">{{ albums[0].artist.name }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索页面底部盒子 -->
    <div class="search-bottom">
      <div class="count">
        <span v-if="activeName == '单曲'">找到{{ songCount }}首{{ activeName }}</span>
        <span v-if="activeName == '歌手'">找到{{ artistCount }}位{{ activeName }}</span>
        <span v-if="activeName == '专辑'">找到{{ albumCount }}张{{ activeName }}</span>
        <span v-if="activeName == '视频'">找到{{ mvCount }}个{{ activeName }}</span>
        <span v-if="activeName == '歌单'">找到{{ playlistCount }}个{{ activeName }}</span>
        <span v-if="activeName == '用户'">找到{{ userprofileCount }}位{{ activeName }}</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单曲" name="单曲">
          <div class="songs-btns">
            <el-button-group>
              <el-button type="primary" round size="mini" icon="el-icon-caret-right" @click="playAll">播放全部</el-button>
              <el-button type="primary" round size="mini" icon="el-icon-plus"></el-button>
            </el-button-group>
            <el-button class="down-all" size="mini" round plain icon="el-icon-download">下载全部</el-button>
          </div>

          <!-- 搜索到的内容展示区域区域 -->
          <el-table style="width: 100%" :data="songList" size="mini" @row-dblclick="rowDblclick" lazy
            target=".el-table">
            <el-table-column type="index" width="50" align="center"></el-table-column>
            <el-table-column prop="prop" width="80">
              <template slot-scope="{row}">
                <span class="control">
                  <i class="iconfont icon-xihuan" @click="addmyLove(row)"></i>
                  <i class="iconfont icon-xiazai" @click="download(row)"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="音乐标题" width="width" show-overflow-tooltip>
              <template slot-scope="{row}">
                <div class="title-tags">
                  <p><span class="song-title" v-html="row.name"></span><span class="alia" v-if="row.alia.length > 0"
                      v-html="row.alia[0]"></span></p>
                  <div class="tags">
                    <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                    <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                    <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                      @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                    <i v-if="row.pc" class="el-icon-cloudy"></i>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="歌手" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span @click="$router.push('/artists/' + row.ar[0].id)" class="arname" v-html="row.ar[0].name"></span>
              </template>
            </el-table-column>
            <el-table-column label="专辑" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span @click="$router.push('/albums/' + row.al.id)" class="song-title" v-html="row.al.name"></span>
              </template>
            </el-table-column>
            <el-table-column prop="dt" label="时长" width="100"></el-table-column>
            <el-table-column label="热度" width="100">
              <template slot-scope="{row}">
                <el-progress :percentage="row.pop" color="#d83b55" :show-text="false" :stroke-width="5"></el-progress>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <el-pagination v-show="songCount >= 30" background layout="prev, pager, next" :current-page="page"
            :page-size="limit" :total="songCount" @current-change="handleCurrentChange" :hide-on-single-page="true">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="歌手" name="歌手">
          <div class="artists-item" v-for="item in artists" :key="item.id" @click="$router.push('/artists/' + item.id)">
            <img :src="item.picUrl">
            <div class="info">
              <p><span class="ar-name" v-html="item.name"></span><span class="trans" v-if="item.trans"> ({{ item.trans
              }})</span></p>
              <span class="user-icon"><i class="el-icon-user"></i></span>
            </div>
          </div>
          <!-- 分页器 -->
          <el-pagination v-show="artistCount >= 30" background layout="prev, pager, next" :current-page="page"
            :page-size="limit" :total="songCount" @current-change="handleCurrentChange" :hide-on-single-page="true">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="专辑" name="专辑">
          <div class="albums-item" v-for="item in albums" :key="item.id" @click="$router.push('/albums/' + item.id)">
            <div class="img">
              <img :src="item.picUrl">
              <span class="iconfont icon-zhuanji1"></span>
            </div>
            <div class="info">
              <p><span class="ar-name" v-html="item.name"></span><span v-if="item.alias[0]"
                  v-html="item.alias[0]"></span></p>
              <span class="albums-artists">{{ item.artist.name }}<i v-if="item.artist.trans">({{ item.artist.trans
              }})</i></span>
            </div>
          </div>
          <!-- 分页器 -->
          <el-pagination v-show="albumCount >= 30" background layout="prev, pager, next" :current-page="page"
            :page-size="limit" :total="songCount" @current-change="handleCurrentChange" :hide-on-single-page="true">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="视频" name="视频">
          <div class="mv-list">
            <div class="mv-item" v-for="item in mvList" :key="item.id">
              <div class="mv-img" @click="$router.push('/mv/' + item.id)">
                <img :src="item.cover">
                <span class="play-count"><i class="el-icon-caret-right"></i>{{ item.playCount > 100000 ? (item.playCount
                / 10000).toFixed(0) +
                '万' : item.playCount
                }}</span>
                <span class="mv-time">{{ item.duration | format }}</span>
              </div>
              <p class="mv-name">
                <el-tag type="danger" size="mini">MV</el-tag>
                <span v-html="item.name"></span>
              </p>
              <span class="arname" @click="$router.push('/artists/' + item.artists[0].id)">{{ item.artists[0].name
              }}</span>
            </div>
          </div>
          <!-- 分页器 -->
          <el-pagination v-show="mvCount > 30" background layout="prev, pager, next" :current-page="page"
            :page-size="limit" :total="mvCount" @current-change="handleCurrentChange" :hide-on-single-page="true">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="歌单" name="歌单">
          <div class="playlists-item" v-for="item in playlists" :key="item.id"
            @click="$router.push('/playlists/' + item.id)">
            <img :src="item.coverImgUrl">
            <div class="info">
              <p v-html="item.name"></p>
              <span class="playCount">{{ item.trackCount }}首</span>
              <span class="user-icon"><i>by </i>{{ item.creator.nickname }}</span>
              <div class="play"><i class="el-icon-video-play"> </i>
                {{ item.bookCount > 100000 ? (item.bookCount / 10000).toFixed(0) + '万' : item.bookCount }}</div>
            </div>
          </div>
          <!-- 分页器 -->
          <el-pagination v-show="playlistCount >= 30" background layout="prev, pager, next" :current-page="page"
            :page-size="limit" :total="songCount" @current-change="handleCurrentChange" :hide-on-single-page="true">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="用户" name="用户">
          <div class="user-item" v-for="item in userprofiles" :key="item.id"
            @click="$router.push('/userprofiles/' + item.userId)">
            <div class="img">
              <img class="userImg" :src="item.avatarUrl">
              <img v-if="item.avatarDetail" class="indentity" :src="item.avatarDetail.identityIconUrl">
            </div>
            <div class="info">
              <p><span v-html="item.nickname"></span><span v-show="item.gender == 1" class="el-icon-male"></span><span
                  v-show="item.gender == 0" class="el-icon-female"></span></p>
              <span v-if="item.avatarDetail" class="user-icon">网易云音乐人</span>
              <span v-else class="user-icon">{{ item.signature ? item.signature : '' }}</span>
            </div>
          </div>
          <!-- 分页器 -->
          <el-pagination v-show="userprofileCount >= 30" background layout="prev, pager, next" :current-page="page"
            :page-size="limit" :total="songCount" @current-change="handleCurrentChange" :hide-on-single-page="true">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-backtop :bottom="150" :right="150">
      <div>
        <span class="iconfont icon-huidaodingbu" style="fontSize:26px; color:rgb(96, 56, 207)"></span>
      </div>
    </el-backtop>
  </div>
</template>

<script>
import axios from '@/request/request'
import { lightKey } from '@/components/utils/lightKeWord'
export default {
  data() {
    return {
      // 单曲总数
      songCount: 0,
      // 单曲列表
      songList: [],
      playSongList: [],
      // 歌单信息
      playlists: [],
      // 歌单总数
      playlistCount: 0,
      // 专辑信息
      albums: [],
      // 专辑总数
      albumCount: 0,
      // 歌手信息
      artists: [],
      // 歌手总数
      artistCount: 0,
      // 用户信息
      userprofiles: [],
      // 用户总数
      userprofileCount: 0,
      // 视频信息
      mvList: [],
      mvCount: 0,
      activeName: '单曲',
      page: 0,
      limit: 30,
      keyword: this.$route.params.keyword,
      isMessage: false
    }
  },
  filters: {
    format(time) {
      let m = (time / 1000 / 60).toFixed(0)
      m = m < 10 ? '0' + m : m
      let s = (time / 1000 % 60).toFixed(0)
      s = s < 10 ? '0' + s : s
      return m + ':' + s
    }
  },
  created() {
    // this.keyword = this.$route.params.keyword
    this.getSearchResult(1000)
    this.getSearchResult(10)
    this.getSearchResult()
  },
  watch: {
    $route(val) {
      Object.assign(this.$data, this.$options.data.call(this))
      this.keyword = val.params.keyword
      this.getSearchResult()
    },
  },
  computed: {
    hotArtist() {
      let max = 0
      this.artists.forEach((item) => {
        if (max < item.albumSize) {
          max = item.albumSize
        }
      })
      return this.artists.find((item) => item.albumSize == max)
    }
  },
  methods: {
    // 获取搜索结果
    async getSearchResult(defaultType) {
      const type = defaultType || 1
      // 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合, 2000:声音(搜索声音返回字段格式会不一样)
      if (this.keyword.trim()) {
        const timestamp = +new Date()
        const { data: res } = await axios.get(`/cloudsearch?keywords=${this.keyword}&type=${type}&offset=${this.page}&timestamp=${timestamp}`)
        if (res.code == 200 && type == 1 && res.result.songCount > 0) {
          // 保存单曲信息
          res.result.songs.forEach(item => {
            item.dt = this.format(item.dt)
          })
          this.songCount = res.result.songCount
          this.playSongList = JSON.stringify(res.result.songs)
          this.songList = lightKey(this.keyword, res.result.songs, type)
        } else if (res.code == 200 && type == 1000 && res.result.playlistCount > 0) {
          // 保存歌单信息
          this.playlists = lightKey(this.keyword, res.result.playlists, type)
          this.playlistCount = res.result.playlistCount
        } else if (res.code == 200 && type == 10 && res.result.albumCount > 0) {
          // 保存专辑信息
          this.albums = lightKey(this.keyword, res.result.albums, type)
          this.albumCount = res.result.albumCount
        } else if (res.code == 200 && type == 100 && res.result.artistCount > 0) {
          // 保存歌手信息
          this.artists = lightKey(this.keyword, res.result.artists, type)
          this.artistCount = res.result.artistCount
        } else if (res.code == 200 && type == 1002 && res.result.userprofileCount > 0) {
          // 保存用户信息
          this.userprofiles = lightKey(this.keyword, res.result.userprofiles, type)
          this.userprofileCount = res.result.userprofileCount
        } else if (res.code == 200 && type == 1004 && res.result.mvCount > 0) {
          // 保存视频信息
          this.mvList = lightKey(this.keyword, res.result.mvs, type)
          this.mvCount = res.result.mvCount
        } else if (this.isMessage || type == 1) {
          this.$message.warning(`很抱歉，未能找到与${this.keyword}相关的任何${this.activeName}`)
          // Object.assign(this.$data, this.$options.data.call(this))
        }
      }
    },
    // tab点击函数
    handleClick() {
      this.page = 1
      this.selectGetList()
    },
    // 处理歌曲时间函数
    format(dt) {
      let m = parseInt(dt / 1000 / 60)
      let s = ((dt / 1000) % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    // 分页器处理函数
    handleCurrentChange(page) {
      this.page = page
      this.selectGetList()
    },
    // 根据点击的tab栏获取对应数据处理方法
    selectGetList() {
      this.isMessage = true
      if (this.activeName == '单曲') {
        this.getSearchResult(1)
      } else if (this.activeName == '歌手') {
        this.getSearchResult(100)
      } else if (this.activeName == '专辑') {
        this.getSearchResult(10)
      } else if (this.activeName == '歌单') {
        this.getSearchResult(1000)
      } else if (this.activeName == '用户') {
        this.getSearchResult(1002)
      } else if (this.activeName == '视频') {
        this.getSearchResult(1004)
      }
      window.scrollTo(0, 0)
    },
    // 表格行单击事件
    rowDblclick(row) {
      this.$store.dispatch('audio/getSongUrl', row)
    },
    // 添加到我的喜欢音乐
    async addmyLove(row) {
      const { data: res } = await axios.post(`/like?id=${row.id}`)
      if (res.code == 200) {
        this.$message.success('喜欢成功')
      }
    },
    // 点击获取下载链接
    async download(row) {
      const { data: res } = await axios.get(`/song/download/url?id=${row.id}`)
      if (res.code == 200) {
        this.$download(res)
      }
    },
    playAll() {
      this.$store.dispatch('audio/getSongUrl', JSON.parse(this.playSongList)[0])
      this.$store.commit('audio/updateNowPlayList', JSON.parse(this.playSongList))
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width:1500px) {
  .search-container {
    width: 70% !important;
  }
}

@media screen and (max-width:1000px) {
  .search-container {
    width: 100% !important;
  }
}

/deep/ .el-table {
  background-color: transparent;
}

/deep/ .el-table__expanded-cell {
  background-color: transparent;

}

/deep/ .el-table tr {
  background-color: transparent;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

/deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.search-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4% 30px 20px;
  width: 50%;
  background-color: rgba(rgb(255, 255, 255), 0.8);

  .search-background {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
  }

  .search-top {
    text-align: start;

    h2 {
      margin: 0;
      color: rgb(74, 74, 74);
      font-size: 22px;
    }

    .fun {
      display: flex;
      flex-direction: column;
      margin: 20px 0;

      h6 {
        margin: 0;
        font-weight: 400;
        color: rgb(146, 146, 146);
      }

      .fun-list {
        display: flex;
        align-items: center;
        cursor: default;

        .fun-item {
          display: flex;
          align-items: center;
          background-color: rgb(240, 240, 240);
          width: 30%;
          height: 70px;
          margin-top: 10px;
          border-radius: 5px;
          padding: 0 10px;
          margin-right: 15px;
          // overflow: hidden;

          img {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            margin-right: 10px;
            overflow: hidden;
          }

          p {
            width: 80%;
            display: flex;
            flex-direction: column;
            margin: 0;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            span {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              i {
                font-style: normal;
              }
            }

            .number {
              font-size: 13px;
              color: rgb(149, 149, 149);
            }
          }
        }
      }

    }
  }

  .search-bottom {
    position: relative;
    cursor: default;

    .count {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 14px;
      color: rgb(178, 178, 178);
    }


    /deep/ .el-tabs__item.is-active {
      color: #000;
      font-size: 17px;
      font-weight: 700;
    }

    /deep/ .el-tabs__item:hover {
      color: #000;
    }

    /deep/ .el-tabs__active-bar {
      background-color: rgb(117, 46, 192);
      height: 3px;
    }

    /deep/ .el-tabs__nav-wrap::after {
      width: 0;
    }

    /deep/ .el-button--primary {
      background-color: rgb(132, 65, 204) !important;
      border-color: rgb(255, 255, 255) !important;
    }

    /deep/ .el-icon-caret-right {
      font-size: 12px;
    }

    /deep/ .el-button.is-plain:focus,
    .el-button.is-plain:hover {
      background-color: rgb(255, 255, 255);
      color: #000;
      border-color: #DCDFE6;
    }

    /deep/ .el-icon-star-off,
    .el-icon-download {
      font-size: 14px;
      margin: 3px;
    }

    /deep/ .el-tag--mini {
      height: 16px;
      line-height: 16px;
      padding: 0 2px;
    }

    /deep/ .el-table--mini {
      font-size: 14px;
    }

    .songs-btns {
      display: flex;
      width: 100%;
      margin-bottom: 10px;

      .down-all {
        margin-left: 5px;
      }
    }

    // 喜欢和下载按钮
    .control {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;

      .icon-xiazai {
        font-size: 20px;
        margin-left: 5px;

        &:hover {
          font-weight: 700;
        }
      }

      .icon-xihuan {
        transform: translateY(1px);

        &:hover {
          font-weight: 700;
        }
      }
    }

    // 音乐标题
    .title-tags {
      display: flex;

      p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0;
      }

      .tags {
        display: flex;
        align-items: center;

        .vip-tag {
          color: #d83b55;
          border: 1px solid #d83b55;
          margin-left: 3px;
          font-size: 12px;
        }

        .sq-tag {
          color: #962ed6;
          border: 1px solid #962ed6;
          margin-left: 3px;
          font-size: 12px;
        }

        /deep/ .el-icon-cloudy {
          font-size: 16px;
          // transform: translateY(4px);
          margin-left: 3px;
        }
      }
    }

    .arname {
      &:hover {
        color: rgb(0, 0, 0);
      }
    }

    .song-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &:hover {
        color: rgb(0, 0, 0);

      }

      .alia {
        color: #9e9d9d;
        font-style: normal;
      }
    }

    // 分页器
    .el-pagination {
      margin-top: 20px;
    }

    // 歌手展示区域
    .artists-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      padding: 10px 20px;

      &:hover {
        background-color: rgb(243, 243, 243);
      }

      img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        border-radius: 5px;
      }

      .info {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-between;

        p {
          .ar-name {
            color: #000;
          }

          .trans {
            color: rgb(191, 191, 191);
          }
        }

        .user-icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #e15346;
          text-align: center;
          line-height: 20px;
          color: #fff;
          font-size: 14px;
        }
      }
    }

    // 专辑展示区域
    .albums-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      padding: 10px 20px;
      text-align: start;

      &:hover {
        background-color: rgb(243, 243, 243);
      }

      .img {
        position: relative;
        margin-right: 30px;
        width: 60px;
        height: 60px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 5px;
          z-index: 10;
        }

        .icon-zhuanji1 {
          position: absolute;
          top: 50%;
          right: -30px;
          transform: translateY(-50%);
          font-size: 50px;
          z-index: 1;
          color: rgb(0, 0, 0);
        }
      }

      .info {
        display: flex;
        align-items: center;
        flex: 1;
        // justify-content: space-between;

        p {
          width: 50%;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .ar-name {
            color: rgb(32, 32, 32);
          }

          span {
            color: rgb(191, 191, 191);
          }
        }

        .albums-artists {
          width: 50%;
          font-size: 12px;
          color: rgb(163, 163, 163);

          i {
            color: rgb(163, 163, 163);
            font-style: normal;
            margin-left: 3px;
          }
        }
      }
    }

    // 视频展示区域
    .mv-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;

      .mv-item {
        width: 30%;
        height: 190px;
        text-align: start;
        margin-bottom: 20px;
        // background-color: pink;

        .mv-img {
          position: relative;
          width: 100%;
          height: 150px;
          border-radius: 4px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;

            &:hover {
              transform: scale(1.2);
            }
          }

          .play-count {
            position: absolute;
            top: 5px;
            right: 10px;
            color: rgb(255, 255, 255);
            font-size: 13px;


            .el-icon-caret-right {
              font-size: 15px;
            }
          }

          .mv-time {
            position: absolute;
            bottom: 5px;
            right: 10px;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgb(255, 255, 255);
          }
        }

        .mv-name {
          margin: 0;
          text-align: start;
          font-size: 13px;
          margin-top: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .arname {
          display: inline-block;
          margin-top: 5px;
          font-size: 13px;
          color: rgb(214, 214, 214);
        }

        /deep/ .el-tag--mini {
          box-sizing: border-box;
          height: 14px;
          line-height: 14px;
          padding: 0 2px;
          margin-right: 3px;
        }
      }
    }

    // 歌单展示区域

    .playlists-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      padding: 10px 20px;
      text-align: start;

      &:hover {
        background-color: rgb(243, 243, 243);
      }

      img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        border-radius: 5px;
      }

      .info {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-between;

        p {
          width: 50%;
          color: rgb(54, 54, 54);
        }

        .playCount {
          width: 10%;
          font-size: 13px;
          color: rgb(167, 167, 167);
        }

        .user-icon {
          width: 40%;
          color: rgb(81, 81, 81);
          font-size: 14px;

          i {
            font-size: 12px;
            font-style: normal;
            color: rgb(167, 167, 167);

          }
        }

        .play {
          width: 10%;
          display: flex;
          align-items: center;
          height: 20px;
          color: rgb(167, 167, 167);
          font-size: 14px;
          line-height: 20px;

          /deep/ .el-icon-video-play {
            font-size: 16px;
            line-height: 20px;
            color: rgb(135, 135, 135);
            margin-right: 3px;
          }
        }
      }
    }

    // 歌手展示区域
    .user-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      padding: 10px 20px;

      &:hover {
        background-color: rgb(243, 243, 243);
      }

      .img {
        position: relative;
        margin-right: 10px;
        width: 60px;
        height: 60px;

        .userImg {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
        }

        .indentity {
          position: absolute;
          right: 0;
          bottom: 0;
          overflow: hidden;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }

      }

      .info {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-between;

        p {
          width: 50%;
          display: flex;
          align-items: center;
          color: rgb(12, 12, 12);
          font-size: 15px;

          .el-icon-male {
            color: rgb(62, 177, 223);
            font-weight: 700;
            font-size: 16px;
            margin-left: 3px;
          }

          .el-icon-female {
            color: hotpink;
            font-weight: 700;
            font-size: 16px;
            margin-left: 3px;
          }
        }

        .user-icon {
          font-size: 13px;
          color: rgb(177, 177, 177);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}
</style>